<template>
  <!-- li{分类列表1$}*100 -->
  <div class="category">
    <categorynavbar />
    <div class="menu">
      <cateleftmenu :titles="categorytitiles" @leftitemclick="leftitemclick" />
      <caterightmenu
        @catetabclick="catetabclick"
        :categorygoodsarr="categorygoodsarr"
      />
    </div>
  </div>
</template>

<script>
import bsrcoll from "better-scroll";
import categorynavbar from "./Children/CategoryNavbar";
import cateleftmenu from "./Children/CateLeftmenu";
import caterightmenu from "./Children/Categoryrightmenu.vue";

import {
  getCategory,
  getSubcategory,
  getCategorygoods,
} from "@/network/category";

export default {
  name: "category",
  data() {
    return {
      categorylist: [],
      categorytitiles: [],
      currentindex: 0, //左边的导航index
      //goodstypelist: ["流行", "新款", "精选"],
      categorygoodsarr: {
        new: [],
        pop: [],
        sell: [],
      },
    };
  },
  components: {
    categorynavbar,
    cateleftmenu,
    caterightmenu,
  },
  created() {
    getCategory().then((res) => {
      console.log(res);
      //获取分类的数据
      this.categorylist = res.data.category.list;

      //获取菜单的title
      res.data.category.list.forEach((item) => {
        this.categorytitiles.push(item.title);
      });

      //每一个title对应的数据
      getSubcategory(this.categorylist[this.currentindex].maitKey).then(
        (res) => {
          // console.log(res);
          this.$store.commit("addcategorylist", {
            categorylist: res.data.list,
            index: 0,
          });
        }
      );
      this._getCategorygoodarr("pop").then((res) => {
        this.categorygoodsarr.pop = res;
      });
      this._getCategorygoodarr("new").then((res) => {
        this.categorygoodsarr.new = res;
      });
      this._getCategorygoodarr("sell").then((res) => {
        this.categorygoodsarr.sell = res;
      });
    });
  },
  mounted() {},
  methods: {
    leftitemclick(index) {
      //console.log(index);
      this.currentindex = index;
      getSubcategory(this.categorylist[this.currentindex].maitKey).then(
        (res) => {
          // console.log(res);
          this.$store.commit("addcategorylist", {
            categorylist: res.data.list,
            index: index,
          });
        }
      );
      this.categorygoodsarr = {};
      this._getCategorygoodarr("pop").then((res) => {
        this.categorygoodsarr.pop = res;
      });
      this._getCategorygoodarr("new").then((res) => {
        this.categorygoodsarr.new = res;
      });
      this._getCategorygoodarr("sell").then((res) => {
        this.categorygoodsarr.sell = res;
      });
    },
    _getCategorygoodarr(type) {
      let miniWallkey = this.categorylist[this.currentindex].miniWallkey; //拿到对应miniWallkey
     // console.log(miniWallkey);
      return getCategorygoods(miniWallkey, type);
    },
    catetabclick(type) {
      // console.log("cate的" + type);
      this._getCategorygoodarr(type).then((res) => {
        this.categorygoodsarr[type] = res;
      });
    },
  },
};
</script>

<style scoped>
.menu {
  margin-top: 44px;
  display: flex;
}
</style>